如何用Axure实现砸彩蛋的交互原型 |
您所在的位置:网站首页 › axure 交互原型 › 如何用Axure实现砸彩蛋的交互原型 |
准备工作:安装软件Axure RP 8或者7。下载地址>>
第一步:从元件库拖入动态面板,将该动态面板命名为彩蛋,创建彩蛋的初始状态
![]() 这是动态面板的初始状态,将该面板状态命名为“彩蛋未砸”。 第二步:根据需要分别设置彩蛋砸开的结果状态![]() 这里我一共设置了4种状态,依次为彩蛋砸开未中、彩蛋砸开已中、没有中奖提示、中奖提示。 ![]() ![]() ![]() ![]() 从元件库新拖入一个动态面板,命名为锤子。恩,这个锤子不是老罗的锤子!(题外话:当然也可以直接导入一个锤子图片- -。我只是想着自己用矩形画个锤子看看)。然后,将锤子的动态面板设为隐藏。 ![]() 设置彩蛋动态面板的移入移出事件:当鼠标移入彩蛋动态面板时,锤子会跟随鼠标移动,移出彩蛋动态面板时,锤子消失。 ![]() 这里需要注意的是,锤子随鼠标移动的设置,需要使用鼠标指针的变量。移动到绝对位置的X轴、Y轴变量为鼠标指针的Cursor.x、Cursor.y,为了让锤子显示在鼠标稍靠后的地方,因此在变量的基础坐标上减去50。(视实际情况减去对应数值) 第五步:设置锤子的鼠标单击事件,也就是彩蛋的交互。这里我设置的是红蛋没奖、橙蛋有奖,先说没砸中的交互。 5.1 设置锤子砸红蛋的单击条件锤子接触到彩蛋时,并且此时彩蛋面板状态为彩蛋未砸。 ![]() 当锤子接触到红蛋,单击鼠标后, 设置面板状态为彩蛋砸开未中 隐藏锤子 等待1000毫秒 设置面板状态为没有中奖提示 ![]() 整个彩蛋的交互实现基本就是这样。
本文转载自产品100 标签:本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至[email protected] 上一篇:敏捷BI真的是颠覆性的BI创新吗? 下一篇:逆向思维:如何使用排除法筛选目标框架 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |